<template>
	<div>
		<!-- 选项 -->
		<div class="flex items-center justify-between mb-20px">
			<div v-for="(item, index) in list" :key="index" class="flex items-center p-20px border-1px  border-solid rounded-12px box-border 
			w-24% cursor-pointer h-90px border-#E5E6EB" @click="change(item)">
				<img :src="item.icon" class=" w-44px h-44px" />
				<div class="ml-10px">
					<p class="text-16px mb-10px text-#000000">{{ item.title }}</p>
					<p class="text-#86909C text-12px">{{ item.desc }}</p>
				</div>
			</div>
		</div>
		<!-- 资产分布 -->
		<div class="mb-20px">
			<AssetAllocation></AssetAllocation>
		</div>
		<!-- 列表 -->
		<div class="mb-20px">
			<TableTabs />
		</div>
	</div>
</template>
<script lang="ts" setup>
import AssetAllocation from './components/AssetAllocation.vue';
import TableTabs from './components/TableTabs.vue';
const list = ref<any[]>([
	{
		id: 1,
		title: '理财',
		desc: '轻松理财，每日挣收益',
		icon: '/person/manage-1.svg'
	},
	{
		id: 2,
		title: '定期产品',
		desc: '方便快捷进行资金转移',
		icon: '/person/manage-1.svg'
	},
	{
		id: 3,
		title: '交易流水',
		desc: '交易明细记录',
		icon: '/person/manage-1.svg'
	},
	{
		id: 4,
		title: '理财记录',
		desc: '理财明细记录一目了然',
		icon: '/person/manage-1.svg'
	}
])
const selected = ref<any>({
	id: 1,
	title: '理财',
	desc: '轻松理财，每日挣收益',
	icon: '/person/contract-1.svg'
})

const change = (item: any) => {
	console.log("00000000")
	selected.value = item
}
</script>
